/*======================================================================================
 * jQuery CheckMenu组件
 * 该组件包含三部分 点击目标按钮  弹出展示目标数据层  点击目标数据项  插入或删除目标位置 关闭展示层 提交数据。
 * Author：xinz
 * Time：2011-11-11
 *======================================================================================*/

(function($){
	
	var CheckMenu = function(options){
		this.id = options['id'];				//对象身份标示
		this.dataList = options['dataList'];
		this.triggerjQueryBtn = options['triggerjQueryBtn'];			//jQuery Object
		this.filterDataList = options['filterDataList'];	//JSON
		this.showDiv = null;
		this.template = options['template'] || "";			//HTML DOM String
		this.HTMLDOMString = "";							//HTML DOM String
		
		this.outputItemjQueryDiv = options['outputItemjQueryDiv'] || null;	//jQuery Object		
		this.itemEvent = null;						//JSON 所有项事件处理约定
		this.outputItemEvent = null;				//JSON 输出项事件处理约定
		this.init();
		
		this.dialog = null
	};
	
	//原型方法: 被当做对象的属性使用
	CheckMenu.prototype = {
		constructor : CheckMenu,		
		'triggerjQueryBtnClick' : function(){		//触发点击选择按钮, 开始执行	
			this.filter();	//组织数据			
		},
		'filter' : function(){				//将filterDataList的数据标注到DataList			
		
			var dataList = this.dataList;
			var filterDataList = this.filterDataList;
			
			$.each(dataList,function(index){
				if(dataList[index]['selected']){
					dataList[index]['selected'] = '0';
				}
			});
			
			
			for(var i=0,j=filterDataList.length;i<j;i++){				
				dataList[filterDataList[i]['id']]['selected'] = '1';				
			}
			
			//this.dataList = dataList;			
			this.buildHTML(dataList);	//数据组织完成后，开始组织HTML		
		},
		'buildHTML' : function(dataList){
			var html = "";
			
			var self = this;
			//var dataList = dataList;
			var template = self.template;
			
			
						
			for(var i in dataList){					
				var selected = (dataList[i]['selected']=="1")?"class='selected'":"";							
				html += template.replace("$id$",'show_'+this.id+"_"+dataList[i]['id']).replace("$name$",dataList[i]['name']).replace("$selected$",selected);							
			}
			
			html = "<ul id='checkmenu_"+ this.id +"'>"+ html +"</ul>";
			//this.showDiv.append(html);	//组织HTML完成后，插入到展示对象，通过获取this.showDiv可以进行展现
			var offset = this.triggerjQueryBtn.offset();
			
						
			this.dialog = $.Dialog.open({
				'content' : '<div class="divProduct">'+ html +'</div>',
				'target' : this.triggerjQueryBtn[0],
				'draggable' : true,
				'hasShade' : true,
				'hasReferBtn' : false,
				'css' : {
					'border' : '1px #C8C8C8 solid',
					'box-shadow' : '0px 0px 3px #c8c8c8',
					'padding' : '10px',
					'top' : offset.top + 20,
					'left' : offset.left,
					'width' : '600px'
				}
			},function(d){
				d.shade.dom.bind({
					'click' : function(){
						d._close.call(d);
					}	
				});	
				d.CLOSE = d._close;
				d._close = function(){
					self.closeCallBack();
					d.CLOSE.call(d);
				}		
			});
			
			this.showDiv = $(".divProduct");
			this.bindItemEvent();	//被组织HTML的每一项，绑定事件
				
		},
		'bindItemEvent' : function(){
			var self = this;
			this.items = this.showDiv.find("a");
			var tempEvent = {};
			if(this.itemEvent == null){
				tempEvent = {'click':function(){self.itemClick(this);}};
			}else{
				tempEvent = this.itemEvent;			//自定义事件
			}
			
			this.items.bind(tempEvent);
		},		
		'itemClick' : function(item){			
			var outputItemjQueryDiv = this.getoutputItemjQueryDiv();		//获取选择项输出位置对象			
			$(item).toggleClass('selected');	//标示已选择 或 取消选择
			
			if($(item).hasClass('selected')){
				this.itemToAdd(item);				//已选择，就插入到输出位置去
			}else{
				this.itemToDelete(item);			//取消选择，就从输出位置中删除
			}
		},
		'itemToAdd' : function(item){
			var outputItemjQueryDiv = this.outputItemjQueryDiv;	
			var tempItem = $(item).clone();
			var tempItemId = tempItem.attr('id').replace('show_','output_');
			
			this.currentItemId = tempItemId.replace('show_','');
			
			tempItem.attr('id',tempItemId);
			
			outputItemjQueryDiv.append(tempItem);
			
			this.bindOutputItemEvent();		//插入到输出位置中的元素，绑定事件			
			this.itemToAddCallBack();		//插入回调
		},
		'itemToDelete' : function(item){
			
			var outputItemjQueryDiv = this.outputItemjQueryDiv;
			var itemId = item.id.replace('show_','output_');
			
							
			outputItemjQueryDiv.find("#"+itemId).remove();	
			this.itemToDeleteCallBack();		//删除回调		
		},
		'getoutputItemjQueryDiv' : function(item){				//寻找输出位置对象，如果未指定则返回触发点得父对象
			var outputItemjQueryDiv = this.outputItemjQueryDiv;
			if(outputItemjQueryDiv == null){				
				outputItemjQueryDiv = this.triggerjQueryBtn.parent();				
			}
			this.outputItemjQueryDiv = outputItemjQueryDiv;
			
			return outputItemjQueryDiv;
		},
		'bindOutputItemEvent' : function(){						//输出项的事件处理，例如添加到输出位置的元素仍然有自己的动作
			var outputItemjQueryDiv = this.outputItemjQueryDiv;
			var outputItemId = this.currentItemId;
			var tempEvent = {};
			var self = this;
			
			if(this.outputItemEvent == null){				
				tempEvent = {'click':function(){
					$(this).remove();
					self.outputItemDeleteCallBack();
				}};				
			}else{
				tempEvent = this.outputItemEvent;							
			}
			
			outputItemjQueryDiv.find("#"+outputItemId).bind(tempEvent);			
		},	
		'setTemplate' : function(str){		//设置模板
			this.template = str;
		},
		'init' : function(){
			var triggerjQueryBtn = this.triggerjQueryBtn;
			var self = this;
			
			//点击覆层，调用点击处理
			//triggerjQueryBtn.bind('click',function(){
				self.triggerjQueryBtnClick();
			//});
		}
	}
	
	//扩展方法：被当做函数使用
	$.extend(CheckMenu,{
		'open' : function(options,fn){
			var checkMenu = new CheckMenu(options);
			if(typeof fn == 'function'){
				fn(checkMenu);
			}
			return checkMenu;
		}
	});
	
	
	$.CheckMenu = CheckMenu;
	
})(jQuery);